<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25 函数回调仿360关闭动画</title>
    <style>

        #box {
            position: absolute;
            right: 0;
            bottom: 0;
            overflow: hidden;
        }

        img {
            vertical-align: top;
        }

        span {
            position: absolute;
            right: 0;
            width: 35px;
            height: 35px;
        }
    </style>
</head>
<body>
<div id="box">
    <span></span>
    <div>
        <img src="images/t.jpg" alt="">
    </div>
    <div>
        <img src="images/b.jpg" alt="">
    </div>
</div>
</body>
</html>

<script>
    var box = document.getElementById("box");
    var close = box.children[0];
    var b = box.children[2];
    close.onclick = function () {
        animate(b, {height: 0}, function () {
            animate(box, {width: 0},function () {
                box.style.display = "none";
            });
        })
    }

    function animate(obj, json, fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var flag = true;
            for (var k in json) {
                // 步长
                var current = parseInt(getStyle(obj, k));
                var step = (json[k] - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style[k] = current + step + 'px';
                if (current != json[k]) {
                    flag = false;
                }
            }
            if (flag) {
                clearInterval(obj.timer);
                console.log('结束了');
                if (fn) {
                    fn();
                }
            }
        }, 30);
    }


    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return window.getComputedStyle(obj, null)[attr];
        }
    }
</script>